<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        padding: 50px;
        font-size: 28px;
    }
    
    .mydiv {
        height: 200px;
        width: 200px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
        display: inline-block;
    }
    
    .case1 {
        background: hsl(210, 13%, 30%);
        color: hsl(210, 13%, 60%);
        text-shadow: 0 .03em .03em hsla(0, 0%, 100%, .8);
    }
    
    .case2 {
        background: hsl(210, 13%, 40%);
        color: hsl(210, 13%, 75%);
        text-shadow: 0 -1px 1px black;
    }
    /* 空心字效果 */
    
    .case3 {
        background: deeppink;
        color: white;
        text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
    }
    
    .case4 {
        background: deeppink;
        color: white;
        text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
    }
    
    .case5 {
        background: deeppink;
        color: white;
        text-shadow: 3px 3px black, -3px -3px black, 3px -3px black, -3px 3px black;
    }
    /* 不过别忘了，我们始终拥有SVG 这个终极方案，不过它需要在结构代
码中插入很多乱糟糟的东西 */
    
    h1 {
        font: 500%/1 Rockwell, serif;
        background: deeppink;
        color: white;
    }
    
    h1 text {
        fill: currentColor;
    }
    
    h1 svg {
        overflow: visible
    }
    
    h1 use {
        stroke: black;
        stroke-width: 6;
        stroke-linejoin: round;
    }
</style>

<body>
    <div class="mydiv case1">ddddddddd</div>
    <div class="mydiv case2">dddddddd</div>
    <div class="mydiv case3">css</div>
    <div class="mydiv case4">css</div>
    <div class="mydiv case5">css</div>
    <h1><svg width="2em" height="1.2em">
        <use xlink:href="#css" />
        <text id="css" y="1em">CSS</text>
        </svg></h1>
</body>

</html>